<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="title">忘记密码</view>
					<view class="tips">请填写找回密码的手机号</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">手机号码:</view>
						<input placeholder="请输入手机号码" placeholder-class="placeholderclass" v-model="mobile" type="number" maxlength="11"/>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">验证码:</view>
						<input placeholder="请输入验证码" placeholder-class="placeholderclass" type="number" style="width: 300upx;" v-model="code" maxlength="6"/>
						<view class="getCode">
							<text @click="openModel()" v-if="showGetCode">获取验证码</text>
							<text v-if="!showGetCode"><text class="count">{{count}}s</text>后重新发送</text>
						</view>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">新密码:</view>
						<input placeholder="请输入新密码" placeholder-class="placeholderclass" password v-model="pwd"/>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">确认密码:</view>
						<input placeholder="请确认密码" placeholder-class="placeholderclass" password v-model="pwd_repeat"/>
					</view>
				</view>
				<view class="tips">
					密码安全规范：必须大于等于6位，且必须是字母（可以选择大写或者小写）、数字的组合。
				</view>
				<view class="determine-btn" @tap="changePwd()">确认修改</view>
				<view class="tips-box flexWarpCenterColumn" v-if="modelFlag">
					<view class="tips-name">请输入图形验证码</view>
					<view class="flexWrapNo">
						<view class="sum">
							<canvas class="canvassum" @click="pushCodeSum()" canvas-id="sumCanvas" id="sumCanvas"
								style="background-color: #f7f7f7;width: 220upx;height: 80upx;">
							</canvas>
						</view>
						<view class="input-box">
							<input placeholder-class="placeClass" v-model="verCode"/>
						</view>
					</view>
					<view class="canvastips">点击图片更换</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="submitCode()">确定</view>
					</view>
				</view>
				<view class="mask-wrap" v-if="modelFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				showGetCode: true,
				count: 60,
				timer: null,
				mobile:"",
				code:"",
				pwd:"",
				pwd_repeat:"",
				modelFlag:false,
				verCode:"",
				sumCanvas:""
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			closeModel(){
				this.modelFlag=false
			},
			submitCode(){
				if(this.verCode!=this.sumCanvas){
					this.$tools.showToast('验证不通过请重新输入');
					this.verCode=""
					this.pushCodeSum();
					return;
				}
				this.modelFlag=false
				this.verCode=""
				this.getCode();
			},
			openModel(){
				if (!this.mobile) {
					this.$tools.showToast('请输入手机号');
					return;
				} else if (this.mobile.length != 11) {
					this.$tools.showToast('请输入正确手机号');
					return;
				}
				this.modelFlag=true
				this.$nextTick(()=>{
					this.pushCodeSum();
				})
			},
			pushCodeSum() {//颜色随机验证码
				var contextsum = uni.createCanvasContext('sumCanvas', this)
				contextsum.beginPath() // 开始路径 取消连线							
				contextsum.setFontSize(24); //字体大小
				contextsum.setTextAlign('center')
				contextsum.setTextBaseline('middle')
			
				const C = ["red", "blue", "green", "yellow", "coral", "antiquewhite", "aqua", "black", "fuchsia",
					"hotpink", "darkcyan"
				]
				const min = 0;
				const maxs = 20;
			
				const A = [
					12, 19, 15, 11, 24, 30, 16, 22, 26, 14, 18, 28,
					27, 13, 17, 24, 39, 20, 21, 25, 29, 13, 23
				]
				const B = [1, 5, 3, 4, 2, 8, 6, 7]
			
				contextsum.fillStyle = C[Math.floor(Math.random() * 10)];
				const math = A[Math.floor(Math.random() * (maxs - min + 1) + min)];
				contextsum.fillText(math, 15, 22); //（内容，左右距离，上下距离）
				contextsum.fillStyle = C[Math.floor(Math.random() * 10)];
				const math2 = '+';
				contextsum.fillText(math2, 50, 25);
				contextsum.fillStyle = C[Math.floor(Math.random() * 10)];
				const math3 = Math.floor(Math.random() * 10);
				contextsum.fillText(math3, 75, 22)
				contextsum.fillStyle = C[Math.floor(Math.random() * 10)];
				const math4 = '='
				contextsum.fillText(math4, 95, 25)
				contextsum.fill();
				contextsum.stroke()
				contextsum.draw() //保存(清除画布)
				this.sumCanvas = math + math3
				console.log(this.sumCanvas)
			},
			getCode: function() {
				var self = this;
				if (!this.mobile) {
					this.$tools.showToast('请输入手机号');
					return;
				} else if (this.mobile.length != 11) {
					this.$tools.showToast('请输入正确手机号');
					return;
				} else {
					// 发送验证码请求
					this.getRestPwdCode()
				}
			},
			getRestPwdCode(){
				var self = this;
				this.$request.post(this.$api.getRestPwdCode, {
					tel:this.mobile
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('验证码已发送，请注意查收');
						// 倒计时
						var TIME_COUNT = 60; //倒计时60s
						if (!self.timer) {
							self.count = TIME_COUNT;
							self.showGetCode = false;
							self.timer = setInterval(() => {
								if (self.count > 0 && self.count <= TIME_COUNT) {
									self.count--;
								} else {
									self.showGetCode = true;
									clearInterval(self.timer);
									self.timer = null;
								}
							}, 1000)
						}
					}
				})
			},
			changePwd(){
				if (!this.mobile) {
					this.$tools.showToast('请输入手机号');
					return;
				} 
				if (this.mobile.length != 11) {
					this.$tools.showToast('请输入正确手机号');
					return;
				}
				if(!this.code){
					this.$tools.showToast('请输入验证码');
					return;
				}
				if(!this.pwd){
					this.$tools.showToast('请输入密码');
					return;
				}
				let passTest=/^(?=.*\d)(?=.*[a-zA-Z])^[\da-zA-Z]{6,16}$/g.test(this.pwd)
				if(!passTest){
					this.$tools.showToast('请填写正确的密码格式');
					return;
				}
				if(!this.pwd_repeat){
					this.$tools.showToast('请再次确认密码');
					return;
				}
				if(this.pwd!=this.pwd_repeat){
					this.$tools.showToast('两次输入的密码不一致');
					return;
				}
				this.$request.post(this.$api.changePwd, {
					tel:this.mobile,
					code:this.code,
					pwd:this.pwd,
					pwd_repeat:this.pwd_repeat
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('重置密码成功');
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tips{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 46upx;
		color: #FFFFFF;
		margin-bottom: 20upx;
		display: block;
	}
	.content {
		padding: 0 36upx;
		.shop-info-box {
			.title{
				font-size: 32upx;
				font-weight: 800;
				color:#fff;
				margin-bottom: 20upx;
			}
			.tips{
				color:#fff;
				font-size: 28upx;
				margin-bottom: 30upx;
			}
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				picker{
					flex: 1;
				}
				.item-title{
					margin-right: 32upx;
					flex: none;
					min-width: 120upx;
				}
				.getCode{
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 400;
					color: #26BCFD;
					flex: none;
					margin-left: 20upx;
					.count{
						color: #FF3710;
					}
				}
				.small{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin:0 40upx;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #82819B;
					border-bottom: 1upx solid #36355E;
					padding-bottom: 10upx;
					width: 80%;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #82819B;
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 158upx;
				margin-top: 12upx;
			}
		}
		.determine-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 322rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 78upx auto;
		}
	}
	.tips-box{
		width: 640upx;
		height:452upx;
		background:#1D1C5C;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 44upx;
			margin-bottom: 44upx;
		}
		.tips-text{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 560upx;
			margin-top: 12upx;
		}
		.line{
			width: 30upx;
			height: 2upx;
			background-color: #fff;
			margin: 0 20upx;
		}
		.input-box{
			height:80upx;
			width: 80upx;
			background: rgba(255,255,255,.1);
			border-radius: 10upx;
			width: 100%;
			margin-left: 20upx;
			input{
				height: 80upx;
				width: 80upx;
				line-height: 80upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				color:#fff;
			}
			.placeClass{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color:rgba(255,255,255,.5);
			}
		}
		.canvastips{
			color: #FFFFFF;
			font-size: 28upx;
			margin-top: 20upx;
		}
		.btn-box{
			margin-top: 56upx;
			.tips-btn{
				width: 260upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #26BCFD;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #26BCFD;
			}
			.noStarted{
				color: #FFFFFF;
				background-color: #26BCFD;
				margin-left: 28upx;
			}
		}
	}
</style>
